<template>
  <view class="box shy-custom-box personal-data">
    <view class="btn_div f1">
      <view class="unction_btn unction_line" @click="updateUserLogo">
        <text class="btn_font">头像</text>
        <image class="choice_title" :src="images"></image>
        <view class="arrow"></view>
      </view>
      <view class="unction_btn delete_bor unction_line" @click="setNickname_click">
        <text class="btn_font">姓名</text>
        <view class="choice btn_font1">{{formationShow.nickName}}</view>
        <view class="arrow"></view>
      </view>
    </view>
    <view class="btn_div f2">
      <view class="unction_btn" >
        <text class="btn_font">绑定手机号</text>
        <view class="choice btn_font1" @click="phoneNumber_click">{{formationShow.mobile}}</view>
        <view class="arrow"></view>
      </view>
      <view class="unction_btn delete_bor">
        <text class="btn_font">会员等级</text>
        <view class="choice btn_font1">{{formationShow.rankName}}</view>
      </view>
    </view>
    <view class="btn_div f3">
      <view class="unction_btn unction_line">
        <text class="btn_font">我的邀请人</text>
        <view class="choice btn_font1">{{formationShow.inviteNickName}}</view>
      </view>
      <view class="unction_btn">
        <text class="btn_font">邀请人电话</text>
        <view class="choice btn_font1">{{formationShow.invitePhone}}</view>
      </view>
      <view class="unction_btn delete_bor">
        <text class="btn_font">邀请人等级</text>
        <view class="choice btn_font1">{{formationShow.inviteRankName}}</view>
      </view>
    </view>
    <!-- 换头像弹出层 -->
    <!-- <uni-popup ref="popup" type="top">
      <view class="popupDiv" @click="findPicture">
        <image :src="images"></image>
      </view>
    </uni-popup> -->
    <!-- <view class="uni-padding-wrap uni-common-mt">
      <button type="primary" @click="informationShow">提交</button>
    </view> -->
  </view>
</template>

<script>
import { PersonalCenter, UpdateUserFile } from '../../service/user/user.service.js'
import { uploadFile } from '@/unit/common.js'
// import { uniPopup } from "@dcloudio/uni-ui"
export default{
  // components: {uniPopup},
  data () {
    return {
      formationId:'',//用户id
      formationShow:[],//个人信息数据
      custom: true, //弹出层是否自定义内容
      FrontOfId:'', //图片 id
      images:'', //图片
      maskClick:true, //点击蒙版关闭弹框
    }
  },
  onShow () {
    this.getUserInfo();
  },
  created () {
    // 
  },
  methods:{  
    updateUserLogo () { // 
      uploadFile({
        success: (res) => {
          
          UpdateUserFile({id: res.data.id}, res => {
            if (res.status == 0) {
              uni.showToast({
                title: '修改头像成功！'
              })
              this.getUserInfo();
            }
          });
        }
      })     
    },
    // 打开弹出层
    // showPopup () {
    //   this.$refs.popup.open()
    // },
    // 个人资料获取
    getUserInfo () {
      PersonalCenter({
      }, (res) => {
        if(res.status == 0){
          this.formationShow = res.data;
          console.log(res.data)
          this.formationId = res.data.userId;
          this.images = res.data.href
        }
      })
    },
    //更改昵称
    setNickname_click(informationId){
      uni.navigateTo({
        url:'/pages/user/setNickname?id='+this.formationId,
      })
    },
    UpdateUserFile(){
      UpdateUserFile({
        id:this.FrontOfId,
      },(res) => {
        if(res.status == 0){
          uni.showToast({
            title:'更改头像成功！',
            icon:'none'
          })
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none'
          })
        }
      })
    },
    phoneNumber_click(){
      uni.navigateTo({
        url: '/pages/user/phoneNumber'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .personal-data {
    
  }
  .popupDiv{
    height: 400rpx;
    width: 400rpx;
    margin:0 auto;
    border:8rpx solid #000;
    
  }
  .popupDiv image{
    width: 400rpx;
    height: 400rpx;
    box-sizing: border-box;
  }
  /* 列表 */
  .unction_btn {
    width: 718.8rpx;
    height: 97rpx;
    line-height: 97rpx;
    border-bottom: 2rpx solid #E1E1E1;
    opcity: 0.5;
    position: relative;
    margin-left:31rpx;
  }
  .unction_btn>text {
    position: absolute;
    left: 8rpx;
  }
  
  .unction_btn .arrow {
    position: absolute;
    right: 29rpx;
    top: 40rpx;
  }
  .btn_div{
    width: 100%;
    background: #FFF;
    margin-bottom:20rpx;
  }
  .f1{
    
    height: 198rpx;
  }
  /* 单独行高 */
  .unction_btn .unction_line{
    height: 99rpx;
    line-height: 99rpx;
  }
  .choice_title{
    width: 80rpx;
    height: 80rpx;
    position:absolute;
    top:7.5rpx;
    right:60rpx;
  }
  .choice {
    position: absolute;
    top: 4rpx;
    right: 65rpx;
  }
  .btn_font {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
  .f2{
    height: 178rpx;
  }
  .btn_font1{
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  /* 三角形 */
  .arrow {
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 18rpx;
    width: 18rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }
  /* 下面的button按钮 */
  .uni-common-mt button {
    width: 687rpx;
    height: 70rpx;
    background: #434343;
    font-size:30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(246, 218, 153, 1);
    margin:21rpx auto;
  }
  .uni-common-mt{
    width: 100%;
    position:absolute;
    bottom:0;
    height: 112rpx;
    border-top:2rpx solid #E1E1E1;
  }
  /* 删除下边框 */
  .delete_bor{
    border:none;
  }
</style>
